<template>
    <div class="LiveclassroomDetial">
        <div class="conetent-nav">
        <div class="conetent-nav-head">
            <img src="/images/logo.png" class="logo1" @click="Goindex()">
            <ul>
                <li v-for="(item,index) in tablesList" :key="index" :class="tablesListindex == index?'selctestye':''" @click="chet(index)">{{item}}</li>
                <li class="conetent-nav-my-center" >
                    <div class="login" v-if="IsLogins">
                      <el-menu class="el-menu-demo" mode="horizontal">
                        <el-submenu index="2" style="bockground:none;margin-top:-22px;">
                          <img :src="avatar" slot="title" alt="" class="title"/>
                          <el-menu-item @click="Topersonil">个人中心</el-menu-item>
                          <el-menu-item @click="Logout">退出登录</el-menu-item>
                        </el-submenu>
                      </el-menu>
                    </div>
                    <div class="login" v-else>
                      <button @click="GoLogin">登录</button>
                      <button @click="Gozhuce">注册</button>
                    </div>
                </li>
            </ul>
        </div>
        </div>
        <!-- <div class="Live-Cl-De-nav">
            <div class="Live-Cl-De-nav-logo">
                <img src="/images/logo.png" @click="checket()"/>
            </div>
            <div class="Live-cl-de-nav-right">
                <ul>
                    <li v-for="(item,index) in LenavList" :key="index" @click="chet(index)" :class="LenavListIndex==index?'chetcs':''">{{item}}</li>
                    <li style="width:30%" class="Live-cl-de-nav-right-serch">
                        <input type="text" name="serch" placeholder="搜索课程或老师"/>
                    </li>
                    <li class="thelogin">
                        <div class="login">
                            <button @click="GoLogin">登录</button>
                            <button @click="outerVisible">注册</button>                       
                        </div>
                    </li>
                    
                </ul>
            </div>
        </div> -->
        <div class="Lvie-cl-de-con" v-if="tablesListindex==3">
            <div class="Lvie-cl-de-con-head">
                <div class="Lvie-cl-de-selel-langu">
                    <span>语言</span>
                    <el-select @change ="changelanguage()" v-model="value" filterable placeholder="请选择语言">
                        <el-option
                            v-for="(item,index) in options"
                            :key="index"
                            :label="item.name"
                            :value="item.spell">
                        </el-option>      
                    </el-select>
                </div>
                <ul>
                    <li v-for="(item,index) in LiveSelectList" :key="index" @click="LiveSelect(index)" :class="LiveSelectListIndex==index?'Lvie-cl-de-con-select':''">{{item}}</li>
                </ul>
            </div>
            <div class="Lvie-cl-de-con-con">
                <ul v-if="LiveSelectListIndex==0">
                    <li v-for="(item,index) in DetailsClassroomList" :key="index" @click="Toclassroom(item)">
                        <div class="Lvie-cl-de-con-con-img">
                            <img :src="item.cover"/>
                        </div>
                        
                        <div class="Classidentifications">
                            <img src="/images/LIVE.png"/>
                            <span>{{item.age_grade}}·{{item.language_level}}</span>
                        </div>
                        <div class="Lvie-cl-de-con-con-con">
                            <p>{{item.title}}</p>
                            <p style="color:#FF5757;font-size:16px">{{item.language}}</p>
                            <p>
                                <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                                <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                                <span v-else-if="item.Isend == 0">已结束</span>
                                <span v-else>距离开课{{item.days}}天</span>
                                <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                            </p>
                        </div>
                    </li>   
                    <li class="holder" v-for="(i,indaax) in holder" :key="indaax" style="cursor: auto"></li>
                    <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无直播间</span>
                        </label>
                    </div>
                </ul>
                <ul v-else-if="LiveSelectListIndex==1">
                    
                    <li v-for="(item,index) in DetailsClassroomList" :key="index" >
                         <div class="Lvie-cl-de-con-con-img">
                            <img :src="item.cover"/>
                        </div>
                        <div class="Classidentifications">
                            <img src="/images/LIVE.png"/>
                            <span>{{item.age_grade}}·{{item.language_level}}</span>
                        </div>
                        <div class="Lvie-cl-de-con-con-con">
                            <p>{{item.title}}</p>
                            <p style="color:#FF5757;font-size:16px">{{item.language}}</p>
                            <p>
                                <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                                <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                                <span v-else-if="item.Isend == 0">已结束</span>
                                <span v-else>距离开课{{item.days}}天</span>
                                <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                            </p>
                        </div>
                    </li>  
                    <li class="holder" v-for="(i,indaax) in holder" :key="indaax" style="cursor: auto"></li>
                    <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无直播间</span>
                        </label>
                    </div>
                </ul>
                <ul v-else-if="LiveSelectListIndex==2">
                    <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无直播间</span>
                        </label>
                    </div>
                    <li v-else v-for="(item,index) in DetailsClassroomList" :key="index">
                         <div class="Lvie-cl-de-con-con-img">
                            <img :src="item.cover"/>
                        </div>
                        <div class="Classidentifications">
                            <img src="/images/LIVE.png"/>
                            <span>{{item.age_grade}}·{{item.language_level}}</span>
                        </div>
                        <div class="Lvie-cl-de-con-con-con">
                            <p>{{item.title}}</p>
                            <p style="color:#FF5757;font-size:16px">{{item.language}}</p>
                            <p>
                                <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                                <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                                <span v-else-if="item.Isend == 0">已结束</span>
                                <span v-else>距离开课{{item.days}}天</span>
                                <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                            </p>
                        </div>
                    </li>  
                </ul>
                <ul v-else-if="LiveSelectListIndex==3">
                    <li v-for="(item,index) in DetailsClassroomList" :key="index">
                         <div class="Lvie-cl-de-con-con-img">
                            <img :src="item.cover"/>
                        </div>
                        <div class="Classidentifications">
                            <img src="/images/LIVE.png"/>
                            <span>{{item.age_grade}}·{{item.language_level}}</span>
                        </div>
                        <div class="Lvie-cl-de-con-con-con">
                            <p>{{item.title}}</p>
                            <p style="color:#FF5757;font-size:16px;">{{item.language}}</p>
                            <p>
                                <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                                <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                                <span v-else-if="item.Isend == 0">已结束</span>
                                <span v-else>距离开课{{item.days}}天</span>
                                <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                            </p>
                        </div>
                    </li>  
                    <li  class="holder" v-for="(i,indaax) in holder" :key="indaax" style="cursor: auto"></li>
                    <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无直播间</span>
                        </label>
                    </div>
                </ul>
                <ul v-else-if="LiveSelectListIndex==4">
                    
                    <li v-for="(item,index) in DetailsClassroomList" :key="index">
                        <div class="Lvie-cl-de-con-con-img">
                            <img :src="item.cover"/>
                        </div>
                        <div class="Classidentifications">
                            <img src="/images/LIVE.png"/>
                            <span>{{item.age_grade}}·{{item.language_level}}</span>
                        </div>
                        <div class="Lvie-cl-de-con-con-con">
                            <p>{{item.title}}</p>
                            <p style="color:#FF5757;font-size:16px">{{item.language}}</p>
                            <p>
                                <span v-if="item.days ==0 & item.minutes == 0">距离开课{{item.hours}}小时</span>
                                <span v-else-if="item.days == 0 & item.hours == 0">距离开课{{item.minutes}}分钟</span>
                                <span v-else-if="item.Isend == 0">已结束</span>
                                <span v-else>距离开课{{item.days}}天</span>
                                <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                            </p>
                        </div>
                    </li>  
                    <li class="holder" v-for="(i,indaax) in holder" :key="indaax" style="cursor: auto"></li>
                    <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无直播间</span>
                        </label>
                    </div>
                </ul>
            </div>
            <div class="Lvie-cl-de-con-pagination">
                <el-pagination :current-page="currentPage" @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
            </div>
        </div>
        <div class="Lvie-cl-de-con" v-else-if="tablesListindex==4">
            <div class="Lvie-cl-de-con-head">
                <div class="Lvie-cl-de-selel-langu">
                    <span>语言</span>
                    <el-select @change ="changelanguage()" v-model="value" filterable placeholder="请选择语言">
                        <el-option
                            v-for="(item,index) in options"
                            :key="index"
                            :label="item.name"
                            :value="item.spell">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="Lvie-cl-de-con-con">
                <div v-if="DetailsClassroomList.length ==0" class="Noclass">
                    <label>
                        <img src="/images/暂无课程安排.png" alt="">
                        <span>暂无直播间</span>
                    </label>
                </div>
                <ul v-else>
                    <li v-for="(item,index) in DetailsClassroomList" @click="ToClassName(item)" :key="index">
                         <div class="Lvie-cl-de-con-con-img">
                            <img :src="item.faceUrl"/>
                        </div>
                        <div class="Classidentifications">
                            <img src="/images/LIVE.png"/>
                            <span>{{item.age_grade}}·{{item.language_level}}</span>
                        </div>
                        <div class="Lvie-cl-de-con-con-con">
                            <p>{{item.group_name}}</p>
                            <p style="color:#FF5757;font-size:16px">{{item.language}}</p>
                            <!-- <p>
                                <span style="font-size:14px;color:#C5C5C5;">免费试听3分钟</span>
                                 <span class="Lvie-cl-de-con-con-auditions">去试听</span>
                            </p> -->
                        </div>
                    </li>                                                                                  
                </ul>
            </div>
            <div class="Lvie-cl-de-con-pagination">
                <el-pagination  :current-page="currentPage"  @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
            </div>
        </div>
        <Denglu v-if="IsLogin" :IsLogin.sync ='IsLogin' :IsLogins.sync ='IsLogins' :avatar.sync ='avatar'></Denglu>
        <Footer class="Lvie-cl-de-con-footer"></Footer>
    </div>
</template>
<script>
import Footer from '../../components/footer'
import citys from '../../../public/citys/citys'
import Denglu from '../../components/denglu'
export default {
    name:'LiveclassroomDetial',
    computed:{
        holder(){
            return 5 -(this.DetailsClassroomList.length%5)
        },
    },
    data(){
        return{
            LenavList:['主页','直播课堂','场景直播','客户端下载'],
            IsLogin:false,
            tablesList:['主页','学习中心','教学中心','直播课堂','场景直播','客户端下载'],
            // LenavListIndex:this.$route.query.tablesListindex,
            tablesListindex:this.$route.query.tablesListindex,
            LiveSelectList:['推荐','儿童','少年','大学生','成年'],
            LiveSelectListIndex:0,
            DetailsClassroomList:[],
            options:[],
            value: '',
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"Polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            currentPage:1,
            age_grade:'',
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            IsLogins:'',
            citiesList:[],
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
        }
    },
    components: {//组件注册
        Footer,Denglu
    },
    mounted() {
        this.getCitiesList()
        this.getclasslist()
        if(this.unserinfo == undefined || this.userinfo == ''){
            this.IsLogins = false
        }else{
            this.IsLogins = true
        }
       
    },
    created(){
         if(this.tablesListindex == ''||this.tablesListindex == undefined){
            this.tablesListindex =3
        }
    },
    methods:{
        changelanguage(){
            this.handleCurrentChange(1)
        },
        Gozhuce(){
            this.$router.push({ path:'/',query:{outerVisible:true}})
        },
        GoLogin(){
            this.IsLogin = true
        },
        outerVisible(){
            this.$router.push({ path:'/',query:{outerVisible:true}})
        },
        Logout(){
            localStorage.clear();
            this.$router.push({ path:'/'})
        },
        getCitiesList(){
            for(let x in citys.cities){
                citys.cities[x].map(item=>{
                    this.options.push(item)
                })
            }
            console.log(this.options,'组装后的')
        },
        Toclassroom(e){
            console.log(e,'=>')
            // this.$message({duration:1000,message:'请先登录',type:'warning'})
            if(e.Isend ==0){
                this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: e.id,index:7,Isend:true}})
            }else{
                this.$router.push({ path:'/views/Teachingcentercoursedetails',query: {id: e.id,index:7,Isend:false}})
            }
        },

        ToClassName(item){
            this.$message({duration:1000,message:'请先登录',type:'warning'})
            // var str = item.type
            // if(item.type == 'online_voice' | item.type == 'realtime_voice'){
            //     if(item.map.userinfo.user_id == this.unserinfo.user_id){
            //         this.$router.push({path:'/views/Voicebroadcast',query:{item: JSON.stringify(item),isscenario:true}})
            //     }else{
            //         this.$router.push({path:'/views/Studentvoice',query:{item: JSON.stringify(item),isscenario:true}})
            //     }
            // }else{
            //     if(item.map.userinfo.user_id == this.unserinfo.user_id){
            //         this.$router.push({path:'/views/LivevideoRoom',query:{item: JSON.stringify(item),isscenario:true}})
            //     }else{
            //         this.$router.push({path:'/views/StudentbroadcastVideproom',query:{item: JSON.stringify(item),isscenario:true}})
            //     }
                
            // }
        },
        checket(){
            this.$router.push({path:'/'})
        },
        chet(e){
            console.log(this.tablesListindex)
            localStorage.setItem("tablesListindex",this.tablesListindex)
            if( e == 0){
                this.tablesListindex = 0
                this.$router.push({path:'/'})
            }else if(e == 5){
                this.tablesListindex = 5
                this.$router.push({ path: "/views/Download",query: {index: 5}});
            }else if(e ==  1 || e == 2){
                this.$message({duration:600,message:'请先登录',type:'warning'})
            }else if(this.tablesListindex ==  3||this.tablesListindex == 4){
                this.tablesListindex = e
                this.handleCurrentChange(1)
                this.getclasslist()
            }     
        },
        Topersonil(){
            this.$router.push({path:'/views/Personalcenter',query:{index:0}})
        },
        handleCurrentChange(val) {
            console.log(val)
            this.currentPage = val
            this.getclasslist()
        },
        LiveSelect(e){
            this.handleCurrentChange(1)
            this.LiveSelectListIndex = e
            if(this.LiveSelectListIndex ==0){
                this.getclasslist()
            }else{
                if(this.LiveSelectListIndex ==1){
                    this.age_grade = 'Childhood'
                }else if(this.LiveSelectListIndex ==2){
                    this.age_grade = 'Teenagers'
                }else if(this.LiveSelectListIndex ==3){
                    this.age_grade = 'UniversityStudent'
                }else if(this.LiveSelectListIndex ==4){
                    this.age_grade = 'Adult'
                }
                this.getagelist()
            }

        },
        getagelist(){
            var _this =this
            var data = {
                age_grade :this.age_grade,
                type:"open_class",
                currentPage:_this.currentPage,
                pageSize:15,
                language:_this.value
            }
            _this.DetailsClassroomList = []
            _this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHomeListPage',
                params:data,
                }).then((res) =>{ 
                    _this.DetailsClassroomList = res.data.data
                    _this.DetailsClassroomList.forEach(function(i){
                        var days = _this.dateDiff(i.start_time)[0]
                            if(days>0){
                                i.days = _this.dateDiff(i.start_time)[0]
                                i.hours =0
                                i.minutes =0
                            }else if(days==0&_this.dateDiff(i.start_time)[1]>0){
                                i.days = 0
                                i.minutes =0
                                i.hours = _this.dateDiff(i.start_time)[1]      
                            }else if(_this.dateDiff(i.start_time)[1] == 0){
                                i.days = 0
                                i.hours =0
                                i.minutes = _this.dateDiff(i.start_time)[2]
                            }else if(_this.dateDiff(i.start_time)[2] ==0){
                                i.Isend = 1 
                            }else{
                                i.Isend = 0
                            }
                        if(i['age_grade'] == "Teenagers"){
                            i['age_grade']='青少年'
                        }else if(i['age_grade'] == "Childhood"){
                            i['age_grade']='儿童'
                        }else if(i['age_grade'] == "University Student"){
                            i['age_grade']='大学生'
                        }else if(i['age_grade'] == "Adult"){
                            i['age_grade']='成年'
                        }
                        
                        if(i['language_level'] == "Zero basis"){
                            i['language_level']='零基础'
                        }else if(i['language_level'] =="Senior"){
                            i['language_level']='高级'
                        }else if(i['language_level'] =="Intermediate"){
                            i['language_level']='中级'
                        }else if(i['language_level'] =="Primary"){
                            i['language_level']='初级'
                        }
                        _this.languageEn.forEach(function(j){
                            if(j[i['language']]){
                                i['language']=j[i['language']]
                            }
                        })
                        _this.Thetheme.forEach(is=>{
                            if(is[i['title']]){
                                i['title'] = is[i['title']]
                            }
                        })
                    });
                    console.log(this.DetailsClassroomList,'课程信息')
                }).catch((error) =>{
            })
        },
        dateDiff(sDate1) {
			var date2 = new Date();
            var date1 = new Date(Date.parse(sDate1.replace(/-/g,   "/")));
            var usedTime =date1.getTime()- date2.getTime()
            var days=Math.floor(usedTime/(24*3600*1000));
            if(days==0){
                var leave1=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数
                var hours=Math.floor(leave1/(60*60*1000));
                if(hours == 0){
                    var leave2=leave1%(24*3600*1000);    //计算天数后剩余的毫秒数
                    var minutes=Math.floor(leave2/(60*1000));
                }
            }else if(days == -1){
                var leave1s=usedTime%(24*3600*1000);    //计算天数后剩余的毫秒数
                var hours=Math.floor(leave1s/(60*60*1000));
                if(hours == -24){
                    var leave2s=leave1s%(24*3600*1000);    //计算天数后剩余的毫秒数
                    var minutess=Math.floor(leave2s/(60*1000));
                }
                
            }
            return [days,hours,minutes];
        },
        getclasslist(){
            var _this = this
            _this.DetailsClassroomList = []
            if(this.tablesListindex ==3){
                var url = 'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryHomeListPage'
                var data ={
                    type:"open_class",
                    currentPage:_this.currentPage,
                    pageSize:15,
                    language:_this.value
                }
            }else if(this.tablesListindex ==4){
                var url = 'http://101.37.66.151:8768/eg-api/message/messageGroup/queryListPage'
                var data ={
                    currentPage:_this.currentPage,
                    pageSize:15,
                    language:_this.value
                }
            }
            _this.$axios({
                method:'get',
                url:url,
                params:data,
                }).then((res) =>{ 
                    _this.DetailsClassroomList = res.data.data
                    _this.DetailsClassroomList.forEach(i =>{
                        if(_this.tablesListindex ==3){
                            var days = _this.dateDiff(i.start_time)[0]
                            if(days>0){
                                i.days = _this.dateDiff(i.start_time)[0]
                                i.hours =0
                                i.minutes =0
                            }else if(days==0&_this.dateDiff(i.start_time)[1]>0){
                                i.days = 0
                                i.minutes =0
                                i.hours = _this.dateDiff(i.start_time)[1]      
                            }else if(_this.dateDiff(i.start_time)[1] == 0){
                                i.days = 0
                                i.hours =0
                                i.minutes = _this.dateDiff(i.start_time)[2]
                            }else if(_this.dateDiff(i.start_time)[2] ==0){
                                i.Isend = 1 
                            }else{
                                i.Isend = 0
                            }
                        }
                        if(i['age_grade'] == "Teenagers"){
                            i['age_grade']='青少年'
                        }else if(i['age_grade'] == "Childhood"){
                            i['age_grade']='儿童'
                        }else if(i['age_grade'] == "University Student"){
                            i['age_grade']='大学生'
                        }else if(i['age_grade'] == "Adult"){
                            i['age_grade']='成年'
                        }
                        
                        if(i['language_level'] == "Zero basis"){
                            i['language_level']='零基础'
                        }else if(i['language_level'] =="Senior"){
                            i['language_level']='高级'
                        }else if(i['language_level'] =="Intermediate"){
                            i['language_level']='中级'
                        }else if(i['language_level'] =="Primary"){
                            i['language_level']='初级'
                        }
                        _this.languageEn.forEach(function(j){
                            if(j[i['language']]){
                                i['language']=j[i['language']]
                            }
                            
                        })
                        _this.Thetheme.forEach(is=>{
                            if(is[i['title']]){
                                i['title'] = is[i['title']]
                            }
                        })
                    });
                    console.log(_this.DetailsClassroomList)
                }).catch((error) =>{
                console.log(error)
            })
        },
        
    }
}
</script>
<style lang="less" scoped>
.holder{
        position: relative;
        width: 18%;
        // cursor: pointer;
        border-radius: 15px;
        overflow:hidden;
        border: 1px solid #e7e7e7;
        margin-top: 40px;
        max-height: 304px;
        background: #ffffff;
        opacity: 0;
    }
.title{
    width: 50px;
    height: 50px;
    border-radius: 25px;
}
.logo1{
    width: 200px;
    height: 34px;
    cursor: pointer;
}
.selctestye{
    color: red;
    background:rgba(39,180,181,1);
}
.conetent-nav{
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0px;
    z-index: 2;
    background: #47CECF;
    
}
.conetent-nav-head{
    position: relative;
    width: 1400px;
    height: 100%;
    margin:  0 auto;
    display: flex;
    align-items: center;
}
.conetent-nav-head>ul{
    display: flex;
    list-style: none;
    width: 60%;
    height: 80px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.conetent-nav-head>ul>li{
    flex: 1;
    height: 100%;
    line-height: 80px;
    text-align: center;
    color: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
}
.conetent-nav-head>ul>li:last-child{
    display: flex;
    align-items: center;
    justify-content: center;
}
.conetent-nav-info{
    width: 25px;
    height: 25px;
    margin-top: 26px;
}
.conetent-nav-my-center{
    text-align: center;
    margin-left: 4%;
}
.conetent-nav-my-center /deep/ .el-menu-demo{
    width: 100%;
    background: none;
    border: none;
    /deep/ .el-submenu__title{
      background: none;
    }
    /deep/ .el-submenu__title:hover{
      background: none;
    }
}
.conetent-nav-my-center /deep/.el-submenu__title{
    background:none;
    width:120px!important;
    height:35px!important;
    background:rgba(255,255,255,1);
    border-radius:18px;
    margin-top: 20px!important;
    line-height: 40px!important;
    color: #64C6C9!important;
}
    *{
        margin: 0;
        padding: 0;
    }
    .LiveclassroomDetial{
        position: relative;
        width: 100%;
        background: #eeeeee;
        min-width: 1400px;
    }
    /*导航样式*/
    .Live-Cl-De-nav{
        position: relative;
        width: 100%;
        height: 80px;
        background: #47CECF;
        display: flex;
        justify-content: center;
        align-items: center;
        div{
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .Live-Cl-De-nav-logo{
        width: 40%;
        cursor: pointer;
    }
    .Live-cl-de-nav-right{
        width: 60%;
        ul{
            display: flex;
            list-style: none;
            width: 100%;
            height: 100%;
            align-items: center;
            li{
                width: 15%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #FFFFFF;
                cursor: pointer;
                margin-left: -1%;
                span{
                    position: relative;
                    width: 100%;
                    height: 43.75%;
                    border:1px solid rgba(255,255,255,1);
                    border-radius:15px;
                    text-align: center;
                    line-height: 200%;
                }
            }
        }
    }
    .chetcs{
        background:rgba(39,180,181,1);
    }
    .Live-cl-de-nav-right-serch{
        input{
            position: relative;
            width: 100%;
            height: 43.75%;
            border:1px solid rgba(255,255,255,1);
            border-radius:15px;
            outline: none;
            padding-left: 4%;
        }
    }
    /*内容样式*/
    .Lvie-cl-de-con{
        position: relative;
        width: 100%;
        background: #f7f7f7;
    }
    .Lvie-cl-de-con-head{
        position: relative;
        width: 100%;
        height: 80px;
        display: flex;
        padding-top: 92px;
        border-bottom: 1px solid #47CECF;
        ul{
            list-style: none;
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: flex-end;
            li{
                width: 10%;
                cursor: pointer;
            }
        }
    }
    .Lvie-cl-de-selel-langu{
        display: flex;
        width: 50%;
        align-items: center;
        justify-content: center;
        span{
            color: #C2C2C2;
            font-size: 14px;
        }
        /deep/.el-select{
            width: 50%;
            margin-left: 2%;         
        }
        /deep/.el-input__inner{
            border-radius: 20px;
            border: 1px #47CECF solid;
            font-weight: bold;
            color: #47CECF;
        }
    }
    .Lvie-cl-de-con-select{
        color: #47CECF;
        font-weight: bold;
    }
    .Lvie-cl-de-con-con{
        position: relative;
        width: 1400px;
        margin: 0 auto;
        margin-top: 80px;
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                position: relative;
                width: 18%;
                cursor: pointer;
                border-radius: 15px;
                overflow:hidden;
                border: 1px solid #e7e7e7;
                margin-top: 40px;
                max-height: 304px;
                background: #ffffff;
            }
        }
    }
    .Lvie-cl-de-con-con>ul>li:hover{
        box-shadow: 2px 14px 6px rgba(0, 0, 0, 0.1);
    }
    .Lvie-cl-de-con-con-img{
        width: 100%;
        height: 60%;
        overflow: hidden;
        img{
            width: 100%;
            height: auto;
            // max-width: 100%;
        }
    }
    .Classidentifications{
        display: flex;
        align-items: center;
        height: 32px;
        width: 100%;
        position: absolute;
        top: 5%;
        img{
            margin-left: 5%;
            margin-top: -14%;
        }
        span{
            margin-left: auto;
            width: 88px;
            align-items: center;
            height: 32px;
            font-size: 12px;
            text-align: center;
            line-height: 32px;
            color: #00B6B7;
            background: #ffffff;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
    }
    .Lvie-cl-de-con-con-con{
        position: relative;
        width: 90%;
        overflow: hidden;
        background: #ffffff;
        margin: 0 auto;
        padding: 0;
        top: 20px;
        display: flex;
        flex-wrap: wrap;
        bottom: 32px;
        p{
            width: 100%;
            padding: 0;
            margin: 0px;
            height:30px;
            line-height: 30px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;

            span{
                height: 26px;
                line-height: 26px;
            }
            &:first-child{
                font-weight: bold;
                font-size: 16px;
            }
        }
    }
    .Lvie-cl-de-con-con-auditions{
        float: right;
        width:83px;
        height:33px;
        border:1px solid rgba(71,206,207,1);
        border-radius:20px;
        line-height: 33px;
        color: #47CECF;
        text-align: center;
        background-image: url("/images/多边形 2 拷贝.png");
        background-repeat: no-repeat;
        background-position: 93%;
        padding-left:0px;
        font-size: 14px;
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
        .el-pagination{
            padding-right: 235px;
        }
    }
    .Lvie-cl-de-con-footer{
        background: #ffffff;
    }
    .thelogin{
        height: 40px!important;
        width: 20%!important;
        border-radius: 15px;
        /deep/.el-submenu__title{
            background: none;
            height: 40px!important;
            line-height: 40px!important;
            border-radius: 15px;
        }
    }
    .thelogin>div>ul>li{
        height: 40px!important;
        width: 100%!important;
        border-radius: 15px;
    }
    .thelogin>div>ul{
        border-radius: 15px;
    }
    .login{
        border-radius: 15px;
        width: 210px;
    }
    .login button{
        width:91px;
        height:35px;
        background:rgba(255,255,255,1);
        border-radius:18px;
        border: none;
        margin-left: 10px;
        color: #64C6C9;
        cursor: pointer;
        outline: none;
    }
    .login button:last-child{
        background: none;
        border: 1px solid #ffffff;
        color: #FFFFFF;
    }
    .Noclass{
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        img{
            width: 63px;
            height: 51px;
        }
    }
    .Noclass>label{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .Noclass>label>span{
        display: block;
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: #d8d8d8;
        margin-top: 10px;
    }
</style>